<template>
<div>
  <div> <el-button type="primary" v-if="updateOrgEnable" @click="handleUpdate">维护组织架构</el-button></div>
  <div :id="chart_container_id" class="chart-container"></div>
  <OrgDialog :id='dialog_id' :visible='orgDialogVisible' @closeDialog="handleCloseOrgDialog"> </OrgDialog>
</div> 
</template>

<script>
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'
import waves from '@/directive/waves' // 水波纹指令
import $ from 'jquery'
import 'orgchart'
import OrgDialog from './orgDialog'

export default {
  name: 'companyOrgChart',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    }
  },
  components: { OrgDialog },
  directives: {
    waves
  },
  data() {
    return {
      current_user_id: this.$store.getters.userId,
      current_user_roles: this.$store.getters.roles,
      chart_container_id: 'chart_' + new Date().getTime(),
      orgDialogVisible: false,
      oc: null,
      org_data: {},
      updateOrgEnable: false,
      dialog_id: ''
    }
  },
  filters: {
  },
  beforeCreate() {

  },
  created() {
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (val && val !== '') {
        API.company_org.get(val).then(response => {
          console.log(response)
          this.org_data = response.data
          if (this.businessOperable() || this.hasRoles(['SUPER_ADMIN'])) {
            this.updateOrgEnable = true
            this.dialog_id = this.id
          } else {
            this.updateOrgEnable = false
          }
          API.company.indexById(val).then(index_response => {
            if (index_response.data && (this.current_user_id === index_response.data.create_id)) {
              this.updateOrgEnable = true
              this.dialog_id = this.id
            }
          })
          if (this.oc == null) {
            this.oc = $('#' + this.chart_container_id).orgchart({
              'data': {
                'id': 0,
                'label': 'init',
                'children': []
              },
              'nodeTitle': 'label'
            })
          }
          const newOptions = {
            'chartContainer': '#' + this.chart_container_id,
            'data': {
              'id': 0,
              'label': this.org_data.company_name,
              'children': JSON.parse(this.org_data.dept_org)
            },
            'nodeTitle': 'label'
          }
          this.oc.init(newOptions)
        })
      }
    }
  },
  methods: {
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    businessOperable() {
      return this.org_data.business_roles && (this.org_data.business_roles.some(item => Static_Data.business_roles.indexOf(item) >= 0))
    },
    handleUpdate() {
      this.orgDialogVisible = true
    },
    handleCloseOrgDialog(val) {
      console.log(val)
      if (val && val.type === 'cancel' && val.data) {
        this.orgDialogVisible = false
      }
      if (val && val.type === 'success' && val.data) {
        console.log('success')
        console.log(this.org_data)
        const newOptions = {
          'chartContainer': '#' + this.chart_container_id,
          'data': {
            'id': 0,
            'label': this.org_data.company_name,
            'children': val.data
          },
          'nodeTitle': 'label'
        }
        this.oc.init(newOptions)
        this.orgDialogVisible = false
      }
    }
  }
}
</script>

<style src="@/../node_modules/orgchart/dist/css/jquery.orgchart.css"></style>
<style scoped>
.chart-container {
  position: relative;
  display: inline-block;
  top: 10px;
  left: 10px;
  height: 420px;
  width: calc(100% - 24px);
  border: 2px dashed #aaa;
  border-radius: 5px;
  overflow: auto;
  text-align: center;
}
</style>
